<template>
  <ECharts ref="chart" :id="id" :class="className" :style="{ height, zIndex }"></ECharts>
</template>
<script>
import echarts from 'echarts'
import { h, defineComponent, ref, onMounted, defineProps } from 'vue'
import { createComponent } from 'echarts-for-vue'
import ResizeObserver from 'resize-observer-polyfill'
export default defineComponent({
  components: {
    ECharts: createComponent({ echarts, h, ResizeObserver }),
  },
})
</script>
<script setup>
const props = defineProps({
  className: {
    type: String,
    default: 'chart',
  },
  id: {
    type: String,
    default: 'chart',
  },
  height: {
    type: String,
    default: '200px',
  },
  zIndex: {
    type: [String, Number],
    default: 1
  },
  radiantGoldAdv: {
    type: Array
  },
  radiantXpAdv: {
    type: Array
  }
})

const chart = ref(null)
onMounted(() => {
  let xAxis = []
  let goldData = []
  let xpData = []
  props.radiantGoldAdv.forEach((item, index) => {
    xAxis.push(index ? `${index}:00` : 0)
    goldData.push(item)
  });
  props.radiantXpAdv.forEach(item => {
    xpData.push(item)
  })

  let series = [{
    name: '经济',
    type: 'line',
    smooth: true,
    itemStyle: {
      opacity: 0
    },
    lineStyle: {
      color: 'rgb(255,215,82)'
    },
    data: goldData
  },
  {
    name: '经验',
    type: 'line',
    smooth: true,
    itemStyle: {
      opacity: 0
    },
    lineStyle: {
      color: 'rgb(172,201,237)'
    },
    data: xpData
  }]
  chart.value.setOption({
    title: {
      text: '总经济经验图'
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        return `${params[0].value > 0 ? '天辉' : '夜魇'} ${params[0].seriesName}领先 ${Math.abs(params[0].value)}<br/>${params[0].value > 0 ? '天辉' : '夜魇'} ${params[1].seriesName}领先 ${Math.abs(params[1].value)}`
      }
    },
    legend: {
      bottom: 0,
      icon: 'circle',
      data: ['经济', '经验']
    },
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '12%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: xAxis
    },
    yAxis: {
      type: 'value',
      axisTick: {
        inside: true
      },
      axisLabel: {
        inside: true,
        formatter: function (value, index) {
          return value ? Math.abs(value) / 1000 + 'k' : value;
        }
      }
    },
    series
  })
})
</script>
<style lang="scss" scoped>
.item {
  margin-top: 20px;
  span {
    font-size: 14px;
  }
}
</style>
